<style>
.s_kefu{float:left;width:460px;padding:20px;font-size:12px;background:#fcfcfc;}
.s_kefu ul{float:left;width:100%;padding:5px 0;}
.s_kefu ul.wtips{background:#f9f9f9;color:blue;line-height:22px;text-align:center;}
.s_kefu ul.heng{border-bottom:#ddd dotted 1px;}
.s_kefu li{float:left;line-height:22px;text-align:center;}
.s_kefu .l1{text-align:right;font-weight:700;color:#666;padding-left:9px;}
.s_kefu .l2{TEXT-OVERFLOW: ellipsis; WHITE-SPACE: nowrap;}
.s_kefu .action{line-height:13px;padding: 5px 0 0 5px;}
.s_kefu .layui-btn{padding:0 20px;}
.s_kefu .l2 #jobs_io{vertical-align:-2px;}
.s_kefu .layui-input{width:110px;line-height:25px;height:25px;padding:0 5px;}
.s_kefu .numbertype{width:69px;display: none;border: 1px solid #e6e6e6;line-height: 25px;height: 25px;}
.s_kefu .numbernote{float:left;display:none;width:100%;margin-top:5px;}
.s_kefu .numbernote .layui-input{width:67px}
.s_kefu .numbernote a{color: #056dae;margin-left:5px}
.s_kefu .numbernote a:hover {color: #f60;}
</style>
<form class="layui-form">
 <div class="s_kefu">
 <ul style='background:#f0f0f0;'>
 <li class="l1">场景：</li>
 <li class="l2">
  <select name='scene' class='notlay' style='width:111px;display: inline;'>
  {if(input('action')=='up' && input('data')=="i")}
	<option value='i'>全部客服</option>
  {else}
	{if input('action')=='add' && !strpos($sell.contact,input('good').'-i')}
	<option value='i'>全部客服</option>
	{/if}
  
    {volist name="menu" id="v"}
	{if input('action')=='add' && !strpos($sell.contact,input('good').'-'.$v.name1)}
	<option value={$v.name1}>{$v.name2}客服</option>
	{elseif input('action')=='up' && strpos($sell.contact,input('data'))}
	{if input('data')==$v.name1}<option value={$v.name1}>{$v.name2}客服</option>{/if}
	{/if}	
	{/volist}
  {/if}
  <!--{if input('action')=='up'}<option value="{:input('data')}">{:input('data')}客服</option>{/if}-->  
 </select></li>
 <li class="l1">类型：</li>
<li class="l2" style='color:#000'>
{if input('good')=='qq'}QQ客服{/if}
{if input('good')=='dd'}钉钉客服{/if}
</li>
</ul>
<ul class='wtips' style="display:none;">微信号公开显示，填写捆绑的手机号会泄漏隐私，建议填写独立微信号！</ul>
  {if input('action')=='add'}<ul class='heng'>
	 <li class="l1">号码：</li>
	 <li class="l2"><input name="number" value='' maxlength='20' onkeyup="value=value.replace(/[\W]/ig,'')" placeholder="如：12345678" class=" layui-input"  type="text" /></li>
	 <span class='jobs_box'>
	 <li class="l1">职位：</li>
	 <li class="l2"><input name="jobs" value=''  maxlength='5' placeholder="如：销售客服" class="layui-input" type="text" /></li>
	 </span>
	 <li class='action'>
		 <a class="mb-action-a" id='down' title="排序下降" ></a>
		 <a class="mb-action-a" id='del' title="删除"></a>
		 <a class="mb-action-a" id="up" title="排序上升"></a>
	 </li>
	<select name="numbertype" class="notlay numbertype" >
		<option value="" >个人QQ</option><option value="b" >营销QQ</option><option value="q" >企点QQ</option>	</select>
	<span class="numbernote" >
		<li class="l1">企点链接：</li>
		<li class="l3">http://url.cn/</li><li class="l2"><input name="numbernote" value='' onkeyup="value=value.replace(/[\W]/ig,'')" maxlength='7' class="layui-input" type="text" /></li><li class="l3">?_type=wap&qidian=true</li><li class="l3"><a href="https://admin.qidian.qq.com/hp/helpCenter/getArticle?id=12087" target="_blank">如何获取链接?</a></li>
	</span>
 </ul>{/if}	
 {if input('action')=='up'}{foreach $result as $v}
 {if $v.number!=''}<ul class='heng'>
	 <li class="l1">号码：</li>
	 <li class="l2"><input name="number" value='{$v.number}' onkeyup="value=value.replace(/[\W]/ig,'')" maxlength='20' placeholder="如：12345678" class=" layui-input"  type="text" /></li>
	 <span class='jobs_box' {if $v.checked!='checked'}style="display: none;"{/if}>
	 <li class="l1">职位：</li>
	 <li class="l2"><input name="jobs" value='{$v.jobs}' maxlength='5' placeholder="如：销售客服" class="layui-input" type="text" /></li>
	 </span>
	 <li class='action'>
		 <a class="mb-action-a" id='down' title="排序下降" ></a>
		 <a class="mb-action-a" id='del' title="删除"></a>
		 <a class="mb-action-a" id="up" title="排序上升"></a>
	 </li>
	<select name="numbertype" class="notlay numbertype" >
		<option value="" >个人QQ</option><option value="b" >营销QQ</option><option value="q" >企点QQ</option>	</select>
	<span class="numbernote" >
		<li class="l1">企点链接：</li>
		<li class="l3">http://url.cn/</li><li class="l2"><input name="numbernote" value='' onkeyup="value=value.replace(/[\W]/ig,'')" maxlength='7' class="layui-input" type="text" /></li><li class="l3">?_type=wap&qidian=true</li><li class="l3"><a href="https://admin.qidian.qq.com/hp/helpCenter/getArticle?id=12087" target="_blank">如何获取链接?</a></li>
	</span>
 </ul>{/if}{/foreach}{/if}
<ul class='kefu_bottom'>
 <li class="l1">&nbsp;</li>
 <li class="l2"><input type="button" class="layui-btn layui-btn-normal layui-btn-small layui-btn-contact" value="保存"  lay-filter="contact" lay-submit=""/><input type="button" class="layui-btn layui-btn-primary layui-btn-small" value="增加" id="s_kefu_add"/> &nbsp; &nbsp;<input type="checkbox" name='jobs_io' checked  value="1" id="jobs_io" lay-filter="jobs_io" />启用客服职位  &nbsp; &nbsp;{if input('good')=='dd'}<a href="https://www.dingtalk.com/qidian/help-detail-13411951.html" style='color: #056dae;' target="_blank">如何查看我的钉钉号?</a>{/if}</li>
 </ul>
</div>
<input type="hidden" value="{:input('good')}" name="good" />
<input type="hidden" value="{:input('data')}" name="data" />
<input type="hidden" value="{:input('object')}" name="object" />
</form>
<script>
$(document).ready(function() {
	$(".numbertype").live('change', function()
	{ 
	//QQ类型改变
		if($("input[name='good']").val()=='qq'){
			var v=$(this).val();numbernote=$(this).siblings('.numbernote');
			v=='q'?numbernote.show():numbernote.hide();
		}
	})
	$("input[name='number']").live('input propertychange', function()
	{ 
	//获取input 元素,并实时监听用户输入
		if($("input[name='good']").val()=='qq'){
			var v=$(this).val(),t3=parseInt(v.substring(0, 3)),len=v.length,numbertype=$(this).parent().siblings('.numbertype');
			if(len>=9&&(t3==800||t3==400)){
				numbertype.show();
			}else{
				numbertype.hide().find("option").eq(0).prop("selected",true);
				numbertype.siblings('.numbernote').hide().find("input").val('');
			}
		}
	})

	$("input[name='number']").live('blur',function () {
		var btn=$('.layui-btn-contact');
		$(this).css("background","");
		if($(this).val() != ""  && $("input[name='number'][value="+$(this).val()+"]").length>1){
			$(this).css("background", "pink");
			layer.tips('此号码已经存在，请勿重复添加',$(this),{time: 5000});
			btn.attr("disabled",true).addClass('layui-btn-disabled');
			return false;
		}else{
			btn.attr("disabled",false).removeClass('layui-btn-disabled');
		}
	});
	$('#s_kefu_add').on('click', function(){
		if($(".s_kefu .heng ").length>=6){layer.alert("每个场景最多只能设置6位客服!",{icon:2});return false;}
		$('.kefu_bottom').before("<ul class='heng'>"+$('#add_html').html()+"</ul>");
	});

	$('.mb-action-a').live('click', function() {
		var action=$(this).attr('id');
		if(action=='del'){
			if ($(".s_kefu .heng").length<=1) {
				layer.alert("<strong>至少要保留1个客服</strong><br />若要删除场景全部客服，请在列表页操作删除", {
					icon: 0
				});
				return false
			}
			$(this).closest('ul').remove();
		}else{
			if ($('.s_kefu .heng').length < 2) {
				layer.alert("亲，就我1个，您想移哪去？", {
					icon: 0
				});
				return false
			}
			var $this = $(this).closest('ul');
			if(action=='up'){
				if($this.prev('ul.heng').length>0){
					$this.prev('ul.heng').before($this);  
				}else{
					$(".s_kefu .heng:last").after($this);
				}
			}else{
				if($this.next('ul.heng').length>0){
					$this.next('ul.heng').after($this);  
				}else{
					$(".s_kefu .heng:first").before($this);
				}
			}
		}
	});


});

 layui.use('form', function(){
  var form = layui.form();
	form.on('submit(contact)', function(data) {
		var  isOK = true,scene=$("select[name='scene']").val(),good=$("input[name='good']").val();
		$(".s_kefu .heng").each(function(i){
			var $number=$(this).find('input:eq(0)'),$number_len=$number.val().length;
			if(good=='qq'){
				if(isNaN($number.val())){
					layer.tips('【QQ号码】只能为数字',$number,{time: 5000});$number.focus();isOK=false;return false;
				}else if($number_len<5 || $number_len>11){
				//判断号码
					layer.tips('【QQ号码】需为5~11位数字',$number,{time: 5000});$number.focus();isOK=false;return false;
				}

				if($(this).find('.numbertype').val()=='q'&&$(this).find('input[name=numbernote]').val().length<6){
				//判断号码
					layer.tips('请输入正确的【企点QQ】链接值',$(this).find('input[name=numbernote]'),{time: 5000});$(this).find('input[name=numbernote]').focus();isOK=false;return false;
				}
					$(this).find('.numbertype').attr('name','numbertype['+i+']');//修改类型序号
					$(this).find('input[name=numbernote]').attr('name','numbernote['+i+']');//修改链接值序号
			}else if(good=='dd'){
				if($number_len<4 || $number_len>30){
				//判断号码
				 layer.tips('【钉钉号】长度需为4~30位',$number,{time: 5000});$number.focus();isOK=false;return false;
				}
			}else {
				if($number_len<6 || $number_len>20){
				//判断号码
				 layer.tips('【微信号】长度需为6~20位',$number,{time: 5000});$number.focus();isOK=false;return false;
				}
			}
			 $number.attr('name','number['+i+']');//修改号码序号

			 if($('#jobs_io').is(':checked')){
			 //启用职位
				var $jobs=$(this).find('input:eq(1)'),$jobs_len=$jobs.val().length;
				if($jobs_len<2 || $jobs_len>5){
				//判断职位
					 layer.tips('【职位】字数需为2~5位，不启用可在下面取消',$jobs,{time: 5000});$jobs.focus();isOK=false;return false;
				}
				 $jobs.attr('name','jobs['+i+']');//修改职位序号
			 }
		});
		if(!isOK){return false;}
		progress(true);
		Aform('shop_admin',$("form *[value!='']").serialize());
		return false;
	});
	form.on('checkbox(jobs_io)', function(data){
			(data.elem.checked)?$('.jobs_box').show():$('.jobs_box').hide();
	}); 

	form.render(); 
 });
</script>
<span id='add_html' style='display: none;'>
	<li class=l1>号码：</li>
	<li class=l2><input name='number' placeholder='如：12345678' class='layui-input' onkeyup="value=value.replace(/[\W]/ig,'')"  maxlength='20' type=text></li>
	<span class='jobs_box'  >
		<li class='l1'>职位：</li>
		<li class=l2><input name='jobs' maxlength='5' placeholder='如：销售客服' class='layui-input' type=text></li>
	</span>
	<li class='action'>
		 <a class="mb-action-a" id='down' title="排序下降" ></a>
		 <a class="mb-action-a" id='del' title="删除"></a>
		 <a class="mb-action-a" id="up" title="排序上升"></a>
	</li>
	<select name="numbertype" class="notlay numbertype">
		<option value="">个人QQ</option><option value="b">营销QQ</option><option value="q">企点QQ</option>	</select>
	<span class="numbernote">
		<li class="l1">企点链接：</li>
		<li class="l3">http://q.url.cn/</li><li class="l2"><input name="numbernote" value='' onkeyup="value=value.replace(/[\W]/ig,'')" maxlength='7' class="layui-input" type="text" /></li><li class="l3">?_type=wap&qidian=true</li><li class="l3"><a href="https://admin.qidian.qq.com/hp/helpCenter/getArticle?id=12087" target="_blank">如何获取链接?</a></li>
	</span>
</span>